@mixin make-col($size, $columns) {
  flex: 0 0 auto;
  width: percentage(divide($size, $columns));
}

.row {
  display: flex;
  flex-direction: row;

  @for $i from 1 through 15 {
    &.w-#{$i*4} {
      width: #{$i * 4}rem;
    }
  }

  .col {
    flex-basis: 0;
    flex-shrink: 1;
    flex-grow: 1;
  }

  @for $i from 1 through 30 {
    .col-#{$i}em {
      width: #{$i}em;
      flex: 0 0 auto;
    }
  }

  @for $i from 1 through 12 {
    .col-#{$i} {
      @include make-col($i, 12);
    }
  }

  @for $i from 1 through 20 {
    .col-#{$i * 5}p {
      @include make-col($i, 20);
    }
  }

  @for $i from 1 through 25 {
    .col-#{$i * 4}p {
      @include make-col($i, 25);
    }
  }
}
